<template>
  <div class="box">
    <div class="corporation_name">
      <div>
        <div class="enterprise_icon" :style="{ background: color }">
          {{ detail.shortName }}
        </div>
      </div>
      <div class="corporation_text">{{ detail.d2CorpName }}</div>
    </div>
    <div class="null_info" v-if="!dataList">暂无数据</div>
    <div v-if="dataList">
      <div v-for="(item, index) in dataList" :key="index">
        <div class="identity_information" :class="item.title.length==7?'identity_information7':item.title.length==8?'identity_information8':''">{{ item.title }}</div>
        <div class="revenue_echarts" v-if="item.title != '核心员工变动趋势'">
          <businessTrendsEcharts
            :Color="'#3282E4'"
            :title="item.unit"
            :x="item.x"
            :y="item.y2"
          ></businessTrendsEcharts>
        </div>
        <div class="revenue_echarts">
          <businessTrendsEcharts
            :Color="'#E3812B'"
            title="变化率（反映每年增长或减少速率）"
            :x="item.x"
            :y="item.y1"
          ></businessTrendsEcharts>
        </div>
      </div>
    </div>

    <!-- <div class="identity_information">纳税变动趋势</div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#3282E4'"></businessTrendsEcharts>
    </div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#E3812B'"></businessTrendsEcharts>
    </div>
    <div class="identity_information">净利润变动趋势</div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#3282E4'"></businessTrendsEcharts>
    </div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#E3812B'"></businessTrendsEcharts>
    </div>
    <div class="identity_information">社保缴税趋势</div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#3282E4'"></businessTrendsEcharts>
    </div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#E3812B'"></businessTrendsEcharts>
    </div>
    <div class="identity_information">核心员工变动趋势</div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#3282E4'"></businessTrendsEcharts>
    </div>
    <div class="revenue_echarts">
      <businessTrendsEcharts :Color="'#E3812B'"></businessTrendsEcharts>
    </div> -->
  </div>
</template>
<script>
import businessTrendsEcharts from "../../components/lookAround/businessTrendsEcharts.vue";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {
    businessTrendsEcharts,
  },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      dataList: [],
      color: "",
      detail: {},
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    // console.log(JSON.parse(this.$route.query.delAll));
    this.dataList = JSON.parse(this.$route.query.delAll).businessTrends;
    this.detail = JSON.parse(this.$route.query.delAll).jkJbxxSfxx;
    this.color = this.$route.query.color;
    console.log(this.dataList, "this.dataList");
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {}, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.enterprise_icon {
  width: 38px;
  height: 37px;
  line-height: 15px;
  padding: 4px 1px 1px 0;
  background-color: #d99d9a;
  font-size: 13px;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 5px;
}
.corporation_name {
  display: flex;
  padding: 10px;
}
.corporation_text {
  font-size: 17.33px;
  color: #000000;
  font-family: "PuHuiTi65";
  margin-left: 10px;
}
.identity_information {
 // background-color: #ecf3fd;
 background-image: url("~img/lookAround/title_low.png");
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  // font-weight: 600;
  background-size: 167% 100%;
  background-position-x: -120px;
  // margin-bottom: 10px;
  margin-top: 10px;
  font-family: "PuHuiTi65";
}
.identity_information7{
  background-size: 175% 100%;
}
.identity_information8{
  background-size: 187% 100%;
}
.revenue_echarts {
  margin-top: 20px;
  width: 100%;
  height: 150px;
  // background-color: rgb(217, 238, 255);
}
.box {
  height: 100%;
  overflow: auto;
}
.null_info {
  text-align: center;
  font-size: 14px;
  margin-top: 50px;
  color: gray;
}

</style>
